@extends('layouts/app')

@section('content')
    <div class="shops-detail">

            {{--菜品图片轮播--}}
        <div class="shops-img">
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    {{--<div class="swiper-slide"><img src="/img/banner1.png" alt="" class="img-responsive"></div>--}}
                    {{--<div class="swiper-slide"><img src="/img/banner2.png" alt="" class="img-responsive"></div>--}}
                    {{--<div class="swiper-slide"><img src="/img/banner3.png" alt="" class="img-responsive"></div>--}}
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="shops-detail-content tab-content">
            {{--菜的信息--}}
            {{--<div class="shops-detail-info white-bg">--}}
                {{--<div class="content-padded padding">--}}
                    {{--<h2 class="f36 gary3 nowrap">超值双人套餐</h2>--}}
                    {{--<p class="summary f24 gary6 nowrap">招牌秘制烧汁+厚厚的烧鸡排+营养时蔬+精选米饭</p>--}}
                    {{--<p class="f28 gary6 nowrap">月售20单</p>--}}
                    {{--<p class="f28 gary6 nowrap">--}}
                        {{--<del class="f32 gary9">￥20</del>--}}
                        {{--<span class="f38 orange">￥15.5</span>--}}
                    {{--</p>--}}
                    {{--<div class="btn">--}}
                        {{--<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">加入购物车</a>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}

            {{--菜所在的店铺的信息--}}
            {{--<div class="shops-info padding row white-bg">--}}
                {{--<div class="arrow-right">--}}
                    {{--<div class="col-2">--}}
                        {{--<img src="/img/eat.png" alt="" class="img-responsive">--}}
                    {{--</div>--}}
                    {{--<div class="col-10">--}}
                        {{--<div class="text">--}}
                            {{--<h3 class="f30 gary3 nowrap"> 店铺名称</h3>--}}
                            {{--<p class="f20 gary9 nowrap"> 店铺名称店铺名称店铺名称</p>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        </div>

        <div class="comments white-bg">
            <div class="comments-title text-center f36">评论</div>
            {{--<ul class="nav-tabs">--}}
                {{--<li><a href="javascript:;" class="active" data-id="#tab1">好评(2)</a></li>--}}
                {{--<li><a href="javascript:;" data-id="#tab2">中评(3)</a></li>--}}
                {{--<li><a href="javascript:;" data-id="#tab3">差评(4)</a></li>--}}
            {{--</ul>--}}

            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <ul class="list-unstyled comments-list">
                        {{--<li>--}}
                            {{--<div class="row padding">--}}
                                {{--<div class="col-2">--}}
                                    {{--<img src="/img/eat.png" alt="" class="img-responsive">--}}
                                {{--</div>--}}
                                {{--<div class="col-10">--}}
                                    {{--<div class="text">--}}
                                        {{--<h4 class="f24 gary9">我呼气 <span class="pull-right f20 gary9">2018-07-16</span> </h4>--}}
                                        {{--<p class="f24 content">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</li>--}}
                        {{--<li>--}}
                            {{--<div class="row padding">--}}
                                {{--<div class="col-2">--}}
                                    {{--<img src="/img/eat.png" alt="" class="img-responsive">--}}
                                {{--</div>--}}
                                {{--<div class="col-10">--}}
                                    {{--<div class="text">--}}
                                        {{--<h4 class="f24 gary9">我呼气 <span class="pull-right f20 gary9">2018-07-16</span> </h4>--}}
                                        {{--<p class="f24 content">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</li>--}}
                    </ul>

                </div>
                <div class="tab-pane" id="tab2">
                    中评
                </div>
                <div class="tab-pane" id="tab3">
                    差评
                </div>
            </div>
        </div>

        {{--// 购物车--}}
        <div class="car" style="display: none;">
            <svg class="icon f72 white" aria-hidden="true">
                <use xlink:href="#icon-tubiao-9"></use>
            </svg>
            <span class="weui-badge" style="position: absolute;">0</span>
        </div>
    </div>

    <div id="myFoods" class="weui-popup__container popup-bottom">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal" style="padding-bottom: 53px;">
            <div class="toolbar">
                <div class="toolbar-inner">
                    <a href="javascript:;" class="picker-button close-popup">关闭</a>
                    <h1 class="title">购物车</h1>
                </div>
            </div>
            <div class="modal-content">
                <div class="weui-cells" id="myFoodsList">

                </div>

                <div class="padding">
                    <button class="weui-btn weui-btn_primary f30 check-btn">去下单</button>
                </div>
            </div>
        </div>
    </div>
    <script src="/jquery-weui/dist/js/swiper.js"></script>
    <script>
        var sid = getRequest().sid, // 商家ID
            id = getRequest().id; // 商家ID

        // 幻灯
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            autoplay : 6000,
            speed:500
        });

        shopCar("first"); //注册购物车
        // 根据店铺ID去拿到购物车数据，
        var carData = getShopsCarData(sid);
        if (carData && carData.length > 0) {
            // 显示购物车图标
            showCarBadge(sid);
            $(".car").show();
        }
        // 获取菜的详情
        function getFoodsDeatil () {
            $.post("/api/shop/dish ", {shop_id: sid, id: id}, function (res) {
                if (typeof res === 'string') {
                    res = JSON.parse(res);
                }

                // 渲染图片
                createImageList (res.data.dish.thumb);
                // 渲染菜和店铺的信息
                var data = {};
                data['type'] = 'foodPanel';
                data['element'] = '.shops-detail-content';
                data['data'] = res.data;

                A.init(data);

                // 渲染评论
                var rdata = {};
                rdata['type'] = 'foodComments';
                rdata['element'] = '.comments-list';
                rdata['data'] = res.data.comments;

                A.init(rdata);
            });
        }
        getFoodsDeatil();

        // 点击加入购物车
        $(".shops-detail-content").on('click', '.add', function () {
            console.log('我要加购物车');
            // 拿到菜的信息
            var food = $(this).attr("data-text");
            food = JSON.parse(food);

            console.log("food", food);
            // 确定店铺的ID
            var shopsId = food.shop_id,
                type = 'add';
            if (food.attribute) {
                type = 'addMore'
            }

            food['num'] = 1;
            // 发布信息给购物车
            Observer.fire("addShops", {
                shopsId: shopsId,
                type: type,
                data: food
            });
            // 显示购物车图标
            $(".car").show();
        });

        // 点击购物车
        $(".car").click(function () {
            // 如果有缓存这个数据,就显示
            showMyFoods({shopsId: sid});
            // 显示列表面板
            $("#myFoods").popup();
        });

        $(".check-btn").click(function () {
            var name = $(".checkbtn").attr("data-name"),
                spend = $(".checkbtn").attr("data-spend");

            location.href="/mobile/takeout-order?shopsId=" + sid +"&shopsName=" + name + "&shopsSpend=" + spend + "&type=takeout";
        });

        // 创建幻灯列表
        function createImageList (strUrl) {
            var arr = strUrl.split(";"),
                htmlText = [];
            console.log("arr", arr);
            for (var i = 0, len = arr.length; i < len; i++) {
                htmlText.push('<div class="swiper-slide"><img src="'+ arr[i] + '" alt="" class="img-responsive"></div>');

            }

            console.log("htmlText", htmlText.join(''));
            $(".swiper-wrapper").html(htmlText.join(''))
        }
    </script>
@endsection

@extends('layouts/footer')
